<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>订单结算</title>
		<style type="text/css">
			#big{
				width: 396px;
				height: 767px;
				background-color: white;
				margin: auto;
			}
			p{
				margin: 0;
				color: #333333;
			}
			a{
				text-decoration: none;
			}
			ul{
				padding: 0;
				margin: 0;
			}
			li{
				list-style: none;
			}
		</style>
		<script type="text/javascript">
		function OpenSelectArea()
		{
			document.getElementById("selectarea").style.display="";
		}
		function CloseSelect()
		{
			document.getElementById("selectarea").style.display="none";
			
		}
		function OpenOrder()
		{
			document.location.href="OrderDetail.html"
		}
		function UpdateShop()
		{
		document.location.href="UpdateShop.html";	
			
		}
		</script>
	</head>
	<body>
		<div style="width: 100%; height: 100%; background: rgb(235, 237, 238);">
			<div id="big">
				<div style="height: 40px; width: 396px;">
					<div style="color:black; font-family: Helvetica; width: 30px; height: 40px; text-align: center; line-height: 40px;
					display: inline-block; margin-left: 24px;">
						9:14
					</div><!--时间-->
					<div style=" float: right;">
						<img src="image/手机右上角.png">
					</div>
				<div style="height: 50px; width: 396px;background-color: white;display: flex;justify-content: space-between;align-items: center;">
					<div>
						<a href="MyOrder.html">
							<div style="margin-left: 20px;">《</div>
						</a>
					</div>
					<div style="width: 240px;">
						<div style="margin-top: 5px;display: inline-block;">订单结算</div>
					</div>
				</div>
				<div style="background-color: white;padding-top: 10px;">
					<div style="margin-left: 20px;background-color: rgb(255 240 243);width: 150px;">美年广场GO店</div>
					<p style="color: #C3C3C3;font-size: 12px;padding-left: 20px;margin-top: 5px;">您距离当前门店1000米以上，请确认门店是否正确</p>
					<p style="height: 0.5px;margin-top: 20px;background-color: #ececec;"></p>
					<p style="height: 50px;padding: 0 20px;line-height: 3.6;"><span style="font-size: 14px;float: left;">联系电话   18393248749</span><span style="font-size: 12px;color: #DBA817;float: right;">自动填写</span></p>
				</div>
				<div style="margin-top: 10px;background-color: white;padding: 20px;">
					<p style="font-size: 15px;">取茶时间</p>
					<p style="font-size: 13px;color: #DBA817;margin-top: 10px;">冰淇淋/鲜食等产品无需等待，可立即向店员领取</p>
				</div>
				<div style="margin-top: 10px;background-color: white;padding: 20px;">
					<div style="display: flex;justify-content: space-between;">
						<img src="image/icon/dingdanimg.png" style="width: 60px;height: 60px;" >
						<div style="width: 260px;">
							<div style="height: 35px;">
								<span style="float: left;">芒芒甘露冰棒</span>
								<span style="float: right;">￥18</span>
							</div>
							<p style="text-align: right;color: #C3C3C3;">x1</p>
						</div>
					</div>
					<p style="height: 0.5px;margin-top: 5px;background-color: #ececec;"></p>
					<div style="display: flex;justify-content: space-between;height: 40px;align-items: center;">
						<div>
							喜茶券
							<span style="background-color: #dba871;color: white;font-size: 12px;display: inline-block;text-align: center;padding: 2px;line-height: 1;border-radius: 2px;">券</span>
						</div>
						<div style="color: #C3C3C3;">暂无可用</div>
					</div>
					<div style="display: flex;justify-content: space-between;height: 40px;align-items: center;">
						<div>备注</div>
						<div>不打包</div>
					</div>
					<div style="height: 50px;text-align: right;">
						<span style="color: #C3C3C3;font-size: 14px;">共1件产品，小计<span style="color: #333333;font-size: 17px;">￥18</span></span>
					</div>
				</div>
				<div style="margin-top: 10px;background-color: white;padding: 15px;display: flex;justify-content: space-between;align-items: center;">
					<div>支付方式</div>
					<div>
						<div  style="color: #01A7f0;margin-right: 5px;" >支付宝</div>
					</div>
				</div>
				<div style="text-align: right;">
					<span style="color: #9d9c9c;font-size: 14px;">合计<span style="color: #000000;font-size: 16px;margin-left: 5px;">￥18</span></span>
					<span style="background-color: rgb(225 152 111);color: white;height: 50px;width: 100px;line-height: 3;display: inline-block;text-align: center;cursor: pointer;" onclick="OpenSelectArea()">支付</span>
				</div>
				
				<div id="selectarea" style="background-color: rgba(0,0,0,0.3); width: 396px;height: 100%;position: absolute;top: 0;display: none;">
					<div style="margin: 20px;background-color: white;position: absolute;top: 30%;border-radius: 5px;">
						<div style="position: absolute;right: 12px;top: 12px;font-size: 20px;background-color: rgb(255 240 243);cursor: pointer;" onclick="CloseSelect();">X</div>
						<p style="margin-top: 20px;color: #333333;font-size: 13px;text-align: center;">请确认自取门店</p>
						<div style="display: flex;justify-content: space-between;margin-top: 20px;padding: 20px;">
							<div style="padding-right: 20px;margin-left: 10px;">
								<p style="font-weight: bold;font-size: 16px;">美年广场GO店</p>
								<p style="color: #DBA817;font-size: 12px;margin: 10px 0;">距您1942米</p>
								<p style="color: #777777;">高新区天府大道中段1388号“红糖”14栋1层3（L105号）号商铺</p>
							</div>
						</div>
						<div style="border-top: 1px solid #C3C3C3;display: flex;justify-content: space-between;background-color: rgb(255 236 240);text-align: center;line-height: 3;margin-top: 10px;">
							<div style="height: 50px;width: 50%;color: #777777;border-right: 1px solid #C3C3C3;cursor: pointer;" onclick="UpdateShop()">更换门店</div>
							<div style="height: 50px;width: 50%;color: #DBA817;cursor: pointer" onclick="OpenOrder()">就是这家</div>
						</div>
					</div>
				</div>
				
			</div>
		</div>
	</body>
</html>